<template>
  <div>
    <div @click="handleOpen" v-if="showChooseBtn === true && isModal === true">
      <slot name="openImgCutter"></slot>
      <slot name="open"></slot>
    </div>
    <button
      type="button"
      v-if="!$slots.openImgCutter && !$slots.open && isModal === true"
      class="btn btn-primary"
      @click="handleOpen"
    >
      {{ label }}
    </button>
    <transition name="fade">
      <div
        v-if="visible"
        :class="isModal === true ? 'mask vue-img-cutter' : ''"
        ref="mask"
      >
        <div
          :class="isModal === true ? 'dialogBoxModal' : 'dialogBox'"
          v-if="visible"
        >
          <transition
            name="fade"
            enter-class="fade-in-enter"
            enter-active-class="fade-in-active"
            leave-class="fade-out-enter"
            leave-active-class="fade-out-active"
          >
            <div
              ref="dialogMainModalRef"
              :class="isModal === true ? 'dialogMainModal' : 'dialogMain'"
              :style="
                'width:' + (isModal === true ? boxWidth + 32 : boxWidth) + 'px'
              "
            >
              <div class="toolMain">
                <div class="tool-title" v-if="isModal === true">
                  图片裁剪
                  <span class="closeIcon" @click="handleClose">×</span>
                </div>
                <div
                  ref="toolBox"
                  :style="
                    'height:' +
                    boxHeight * 0.521 +
                    'rem;width:' +
                    boxWidth * 0.521 +
                    'rem'
                  "
                  @mousemove="controlBtnMouseMove"
                  @mouseup="controlBtnMouseUp"
                  @mouseleave="controlBtnMouseUp"
                  class="toolBox"
                >
                  <!--选取图片-->
                  <div
                    class="tips"
                    v-show="!drawImg.img && showChooseBtn === true"
                  >
                    <div class="btn btn-warning btn-xs" @click="chooseImg">
                      {{ label }}
                    </div>
                  </div>
                  <!--工具栏-->
                  <div
                    v-if="tool == true"
                    v-show="
                      drawImg.img &&
                      dropImg.active !== true &&
                      controlBox.disable == true &&
                      toolBox.disable == true
                    "
                    class="dockMain"
                    :style="'background:' + toolBgc"
                    @mouseenter="dropImgOff"
                  >
                    <div class="dockBtn" v-if="rate">
                      <slot name="ratio"> Ratio: </slot>
                      {{ rate }}
                    </div>
                    <div class="dockBtn" @click="scaleReset">
                      <slot name="scaleReset"> Scale: </slot>
                      {{
                        drawImg.swidth > 0
                          ? (drawImg.width / drawImg.swidth).toFixed(2)
                          : '-'
                      }}
                    </div>
                    <div
                      v-if="originalGraph === false"
                      @click="turnImg(-90)"
                      class="dockBtn"
                    >
                      <slot name="turnLeft"> ↳ </slot>
                    </div>
                    <div
                      v-if="originalGraph === false"
                      @click="turnImg(90)"
                      class="dockBtn"
                    >
                      <slot name="turnRight"> ↲ </slot>
                    </div>
                    <div
                      v-if="originalGraph === false"
                      @click="turnReset()"
                      class="dockBtn"
                    >
                      <slot name="reset"> ↻ </slot>
                    </div>
                    <div
                      v-if="originalGraph === false"
                      class="dockBtnScrollBar"
                    >
                      <div
                        ref="dockBtnScrollControl"
                        @mousemove="scrollBarControlMove"
                        @mousedown="scrollBarControlOn"
                        @mouseleave="scrollBarControlOff"
                        @mouseup="scrollBarControlOff"
                        :style="'left:' + rotateControl.position + 'px'"
                        class="scrollBarControl"
                      ></div>
                      <div
                        v-if="rotateControl.active == true"
                        class="scrollBarText"
                        :style="'left:' + rotateControl.position + 'px'"
                      >
                        {{ rotateImg.angle.toFixed(0) + '°' }}
                      </div>
                    </div>
                    <div
                      v-if="originalGraph === false"
                      @click="flipHorizontal"
                      class="dockBtn"
                    >
                      <slot name="flipHorizontal"> ⇆ </slot>
                    </div>
                    <div
                      v-if="originalGraph === false"
                      @click="flipVertically"
                      class="dockBtn"
                    >
                      <slot name="turnRight"> ⇅ </slot>
                    </div>
                  </div>
                  <!--裁剪区域-->
                  <div
                    v-show="drawImg.img != null && cjshow"
                    ref="toolBoxControl"
                    @mousedown="toolBoxMouseDown"
                    @mouseup="toolBoxMouseUp"
                    @mousemove="toolBoxMouseMove"
                    @mouseleave="toolBoxMouseLeave"
                    class="toolBoxControl"
                    :style="{
                      pointerEvents: moveAble ? 'auto' : 'none'
                    }"
                  >
                    <div class="toolBoxControlBox" v-show="cjshow">
                      <div class="controlBox">
                        <!--蚂蚁线-->
                        <div
                          class="controlBoxInnerLine controlBoxInnerLineTop"
                        ></div>
                        <div
                          class="controlBoxInnerLine controlBoxInnerLineBottom"
                        ></div>
                        <div
                          class="controlBoxInnerLine controlBoxInnerLineLeft"
                        ></div>
                        <div
                          class="controlBoxInnerLine controlBoxInnerLineRight"
                        ></div>
                        <!--工具栏提示-->
                        <div class="selectArea" v-if="originalGraph === false">
                          宽:{{ toolBox.width }} 高:{{ toolBox.height }} (x:{{
                            toolBoxPosition.x
                          }},y:{{ toolBoxPosition.y }})
                        </div>
                        <!--如果是裁剪原图则显示实际大小-->
                        <div class="selectArea" v-if="originalGraph === true">
                          宽:{{
                            (
                              toolBox.width /
                              (drawImg.width / drawImg.swidth)
                            ).toFixed(0)
                          }}
                          高:{{
                            (
                              toolBox.height /
                              (drawImg.width / drawImg.swidth)
                            ).toFixed(0)
                          }}
                          (x:{{ toolBoxPosition.x }},y:{{ toolBoxPosition.y }})
                        </div>
                        <!--操作杆-->
                        <div
                          data-name="leftUp"
                          v-if="sizeChange === true"
                          @mousedown="controlBtnMouseDown($event, 'leftUp')"
                          class="leftUp controlBtn"
                        ></div>
                        <div
                          data-name="leftDown"
                          v-if="sizeChange === true"
                          @mousedown="controlBtnMouseDown($event, 'leftDown')"
                          class="leftDown controlBtn"
                        ></div>
                        <div
                          data-name="rightUp"
                          v-if="sizeChange === true"
                          @mousedown="controlBtnMouseDown($event, 'rightUp')"
                          class="rightUp controlBtn"
                        ></div>
                        <div
                          data-name="rightDown"
                          v-if="sizeChange === true"
                          @mousedown="controlBtnMouseDown($event, 'rightDown')"
                          class="rightDown controlBtn"
                        ></div>

                        <div
                          data-name="topCenter"
                          v-if="
                            sizeChange === true && !rate && toolBox.width > 20
                          "
                          @mousedown="controlBtnMouseDown($event, 'topCenter')"
                          class="topCenter controlBtn"
                        ></div>
                        <div
                          data-name="downCenter"
                          v-if="
                            sizeChange === true && !rate && toolBox.width > 20
                          "
                          @mousedown="controlBtnMouseDown($event, 'downCenter')"
                          class="downCenter controlBtn"
                        ></div>
                        <div
                          data-name="leftCenter"
                          v-if="
                            sizeChange === true && !rate && toolBox.height > 20
                          "
                          @mousedown="controlBtnMouseDown($event, 'leftCenter')"
                          class="leftCenter controlBtn"
                        ></div>
                        <div
                          data-name="rightCenter"
                          v-if="
                            sizeChange === true && !rate && toolBox.height > 20
                          "
                          @mousedown="
                            controlBtnMouseDown($event, 'rightCenter')
                          "
                          class="rightCenter controlBtn"
                        ></div>
                      </div>
                      <div
                        class="toolBoxControlLine toolBoxControlLineItem-1"
                      ></div>
                      <div
                        class="toolBoxControlLine toolBoxControlLineItem-2"
                      ></div>
                      <div
                        class="toolBoxControlLine toolBoxControlLineItem-3"
                      ></div>
                      <div
                        class="toolBoxControlLine toolBoxControlLineItem-4"
                      ></div>
                    </div>
                  </div>
                  <!-- <div class="copyright">
                                        <a
                                            v-if="!DoNotDisplayCopyright"
                                            target="_blank"
                                            href="https://github.com/acccccccb/vue-img-cutter"
                                            rel="nofollow"
                                        >
                                            vue-img-cutter {{ version }}
                                        </a>
                                    </div> -->
                  <!--画布-->
                  <canvas
                    class="canvasSelectBox"
                    ref="canvasSelectBox"
                    :width="boxWidth"
                    @mousedown="dropImgOn"
                    @mouseup="dropImgOff"
                    @mousemove="dropImgMove"
                    :height="boxHeight"
                    v-show="cjshow"
                  ></canvas>
                  <canvas
                    class="canvas"
                    ref="canvas"
                    :width="boxWidth"
                    :height="boxHeight"
                  ></canvas>
                </div>
              </div>
              <div class="i-dialog-footer">
                <input
                  @change="putImgToCanv"
                  ref="inputFile"
                  type="file"
                  :accept="accept"
                  style="width: 1px; height: 1px; border: none; opacity: 0"
                />
                <span @click="chooseImg">
                  <slot name="choose">
                    <div
                      class="btn btn-primary btn-primary-plain"
                      v-if="showChooseBtn === true"
                    >
                      {{ label }}
                    </div>
                  </slot>
                </span>
                <div class="btn-group fr">
                  <span @click="handleClose">
                    <slot name="cancel">
                      <button type="button" class="btn btn-default">
                        取消
                      </button>
                    </slot>
                  </span>
                  <span @click="cropPicture(false)">
                    <slot name="confirm">
                      <button
                        type="button"
                        class="btn btn-primary"
                        style="margin-left: 15px"
                        :disabled="!drawImg.img"
                      >
                        确定
                      </button>
                    </slot>
                  </span>
                </div>
              </div>
            </div>
          </transition>
          <div style="clear: both"></div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
// import config from '../../package.json'

export default {
  name: 'ImgCutter',
  props: {
    cjshow: { type: Boolean, default: true },
    crossOrigin: {
      // 是否设置图片跨域
      type: Boolean,
      default: false,
      required: false
    },
    crossOriginHeader: {
      // 是否设置图片跨域
      type: String,
      default: '*',
      required: false
    },
    label: {
      // 按钮文字
      type: String,
      default: '选择图片',
      required: false
    },
    isModal: {
      // 是否已弹窗形式展示
      type: Boolean,
      default: true,
      required: false
    },
    lockScroll: {
      // 是否在弹窗出现时锁定body
      type: Boolean,
      default: true,
      required: false
    },
    showChooseBtn: {
      // 是否显示选择图片按钮 如果需要兼容IE9 则将此参数改为false
      type: Boolean,
      default: true,
      required: false
    },
    boxWidth: {
      // 裁剪窗口高度
      type: Number,
      default: 800,
      required: false
    },
    boxHeight: {
      // 裁剪窗口高度
      type: Number,
      default: 400,
      required: false
    },
    cutWidth: {
      // 默认裁剪宽度
      type: Number,
      default: 200,
      required: false
    },
    cutHeight: {
      // 默认裁剪高度
      type: Number,
      default: 200,
      required: false
    },
    rate: {
      // 按比例裁剪
      type: String,
      default: null,
      required: false
    },
    tool: {
      // 是否显示工具栏
      type: Boolean,
      default: true,
      required: false
    },
    toolBgc: {
      // 工具栏背景色
      type: String,
      default: '#fff',
      required: false
    },
    imgMove: {
      // 能否拖动图片
      type: Boolean,
      default: true,
      required: false
    },
    sizeChange: {
      // 能否调整裁剪尺寸
      type: Boolean,
      default: true,
      required: false
    },
    originalGraph: {
      // 是否为原图裁剪
      type: Boolean,
      default: false,
      required: false
    },
    moveAble: {
      // 能否调整裁剪区域位置
      type: Boolean,
      default: true,
      required: false
    },
    previewMode: {
      // 裁剪过程中是否返回裁剪结果 裁剪原图卡顿时将此项设置为false
      type: Boolean,
      default: true,
      required: false
    },
    CuttingOriginal: {
      // 是否裁剪原图
      type: Boolean,
      default: false,
      required: false
    },
    WatermarkText: {
      // 水印文字
      type: String,
      default: '',
      required: false
    },
    WatermarkTextFont: {
      // 水印文字样式
      type: String,
      default: '12px Sans-serif',
      required: false
    },
    WatermarkTextColor: {
      // 水印文字颜色
      type: String,
      default: '#fff',
      required: false
    },
    WatermarkTextX: {
      // 水印横向位置
      type: Number,
      default: 0.95,
      required: false
    },
    WatermarkTextY: {
      // 水印纵向位置
      type: Number,
      default: 0.95,
      required: false
    },
    smallToUpload: {
      // 选择的图片宽高均小于裁剪宽高度时候直接上传原图
      type: Boolean,
      default: false,
      required: false
    },
    saveCutPosition: {
      // 是否保存上一次裁剪位置
      type: Boolean,
      default: false,
      required: false
    },
    scaleAble: {
      // 是否允许缩放图片
      type: Boolean,
      default: true,
      required: false
    },
    index: {
      // 自定义参数 返回结果时会带入此值
      default: null,
      required: false
    },
    fileType: {
      // 文件类型
      default: 'png',
      required: false,
      type: String
    },
    toolBoxOverflow: {
      // 是否允许裁剪框超出图片
      type: Boolean,
      default: true,
      required: false
    },
    DoNotDisplayCopyright: {
      type: Boolean,
      default: false,
      required: false
    },
    accept: {
      type: String,
      default: 'image/gif, image/jpeg ,image/png',
      required: false
    }
  },
  model: [
    'label',
    'boxWidth',
    'boxHeight',
    'rate',
    'tool',
    'DoNotDisplayCopyright'
  ],
  data() {
    let toolBoxWidth, toolBoxHeight

    toolBoxWidth = this.boxWidth / 2
    toolBoxHeight = this.boxHeight / 2
    return {
      version: '',
      visible: false,
      fileName: '',
      cutImageObj: null,
      onPrintImgTimmer: null,
      toolBoxPosition: {
        x: 0,
        y: 0
      },
      drawImg: {
        img: null, //规定要使用的图像、画布或视频
        sx: 0, //开始剪切的 x 坐标位置
        sy: 0, //开始剪切的 y 坐标位置
        swidth: 0, //被剪切图像的宽度
        sheight: 0, //被剪切图像的高度
        x: 0, //在画布上放置图像的 x 坐标位置
        y: 0, //在画布上放置图像的 y 坐标位置
        width: 0, //要使用的图像的宽度
        height: 0 //要使用的图像的高度
      },
      toolBox: {
        disable: true,
        width: toolBoxWidth,
        height: toolBoxHeight,
        x: 0,
        y: 0,
        boxMove: {
          start: {
            x: 0,
            y: 0
          },
          moveTo: {
            x: 0,
            y: 0
          }
        }
      },
      dropImg: {
        active: false,
        pageX: 0,
        pageY: 0,
        params: {}
      },
      // 旋转
      rotateImg: {
        angle: 0
      },
      rotateControl: {
        active: false,
        start: {
          x: 0,
          y: 0
        },
        position: 100
      },
      // 缩放
      scaleImg: {
        rate: 0,
        params: {}
      },
      controlBox: {
        disable: true,
        btnName: '',
        start: {
          x: 0,
          y: 0,
          width: 0,
          height: 0
        }
      },
      selectBox: false,
      selectBoxColor: 'rgba(0,0,0,0.6)',
      isFlipHorizontal: false, //是否水平翻转
      isFlipVertically: false // 是否垂直翻转
    }
  },
  mounted() {
    // this.version = config.version
    // 是否为弹窗模式
    if (this.isModal === false) {
      this.visible = true
      this.$nextTick(() => {
        if (this.$refs['toolBox']) {
          this.$refs['toolBox'].onmousewheel = this.scaleImgWheel
          this.$refs['toolBox'].addEventListener(
            'DOMMouseScroll',
            this.scaleImgWheel
          )
        }
      })
    }
  },
  methods: {
    handleOpen(img) {
      let init = (callback) => {
        if (this.$refs['toolBox']) {
          this.$refs['toolBox'].onmousewheel = this.scaleImgWheel
          this.$refs['toolBox'].addEventListener(
            'DOMMouseScroll',
            this.scaleImgWheel
          )
        }

        // 判断下窗口高度
        if (this.isModal === true) {
          if (this.lockScroll === true) {
            document.body.style.overflowY = 'hidden'
          }
          let dialogBoxHeight =
            this.$refs['dialogMainModalRef'].offsetHeight + 200

          let windowHeight = window.innerHeight

          let mask = this.$refs['mask']

          if (dialogBoxHeight > windowHeight) {
            mask.style.overflowY = 'scroll'
          } else {
            mask.style.overflowY = 'hidden'
          }
        }
        if (callback && typeof callback === 'function') {
          callback()
        }
      }

      // 如果传入了图片
      if (img && typeof img == 'object' && img.src) {
        if (img.name) {
          let $image = new Image()

          if (this.crossOrigin === true) {
            $image.crossOrigin = this.crossOriginHeader
          }
          $image.name = img.name
          // $image.width = img.width;
          // $image.height = img.height;
          // $image.style.width = '1px';
          // $image.style.height = '1px';
          $image.style.position = 'fixed'
          $image.style.top = -5000
          $image.style.opacity = 0
          $image.onerror = (e) => {
            console.error('图片加载失败')
            this.$emit('error', {
              index: this.index,
              event: e,
              msg: '图片加载失败'
            })
            this.clearCutImageObj()
          }
          $image.onload = () => {
            if ($image.complete === true) {
              this.visible = true
              this.$nextTick(() => {
                init(() => {
                  this.importImgToCanv($image)
                })
              })
            } else {
              throw new Error('图片加载失败')
              // this.handleClose();
            }
          }
          $image.src = img.src
          this.cutImageObj = $image
          //   document.body.appendChild($image)
          this.$emit('onChooseImg', img, this.index)
        } else {
          throw new Error('传入参数必须包含：src,name')
        }
      } else {
        this.visible = true
        this.$nextTick(() => {
          init()
        })
      }
    },
    handleClose() {
      this.clearAll()
      if (this.isModal === true) {
        if (this.lockScroll === true) {
          document.body.style.overflowY = 'scroll'
        }
        this.$nextTick(() => {
          this.visible = false
        })
      }
    },
    // 选择图片 e.stopPropagation();
    chooseImg() {
      this.$refs['inputFile'].click()
    },
    importImgToCanv(img) {
      let imgHeight = img.height

      let imgWidth = img.width

      let boxWidth = this.boxWidth

      let boxHeight = this.boxHeight

      let rate

      let drawImg = { ...this.drawImg }

      this.fileName = img.name
      drawImg.img = img
      this.scaleImg.rate = imgWidth / imgHeight // 缩放时用到此参数
      if (imgHeight < boxHeight && imgWidth < boxWidth) {
        rate = 1
        drawImg.x = (boxWidth - imgWidth) / 2
        drawImg.y = (boxHeight - imgHeight) / 2
      } else {
        if (imgWidth / imgHeight <= boxWidth / boxHeight) {
          // 计算宽高比
          rate = boxHeight / imgHeight
          drawImg.x = (boxWidth - imgWidth * rate) / 2
        } else {
          rate = boxWidth / imgWidth
          drawImg.y = (boxHeight - imgHeight * rate) / 2
        }
      }
      drawImg.swidth = imgWidth
      drawImg.sheight = imgHeight
      drawImg.width = imgWidth * rate
      drawImg.height = imgHeight * rate
      drawImg.x = (boxWidth - drawImg.width) / 2
      drawImg.y = (boxHeight - drawImg.height) / 2
      this.$set(this, 'drawImg', drawImg)
      this.printImg()
      this.putToolBox()
    },
    // 将选择的图片绘制到画布
    putImgToCanv(e) {
      let file

      if (e.target.files) {
        file = e.target.files[0] || null
      } else {
        // 如果是IE9及以下
        console.error('IE9及以下需要自己传入image对象')
        // this.$emit('importImage',e);
        return false
      }
      if (file) {
        this.fileName = file.name
        let reader = new FileReader()

        reader.readAsDataURL(file)
        reader.onload = (result) => {
          // 图片base64化
          let newUrl = result.target.result

          let img = document.createElement('img')

          img.src = newUrl
          let timmer = setInterval(() => {
            if (reader.readyState === 2) {
              clearInterval(timmer)
              if (
                !this.sizeChange &&
                this.smallToUpload &&
                img.width <= this.cutWidth &&
                img.height <= this.cutHeight
              ) {
                this.handleClose()
                file.name = this.changeFileName(file.name, this.fileType)
                this.$emit('cutDown', {
                  filename: this.changeFileName(file.name, this.fileType),
                  file: file,
                  index: this.index
                })
                return
              }
              let imgHeight = img.height

              let imgWidth = img.width

              let boxWidth = this.boxWidth

              let boxHeight = this.boxHeight

              let rate

              let drawImg = { ...this.drawImg }

              drawImg.img = img
              this.scaleImg.rate = imgWidth / imgHeight // 缩放时用到此参数
              if (imgHeight < boxHeight && imgWidth < boxWidth) {
                rate = 1
                drawImg.x = (boxWidth - imgWidth) / 2
                drawImg.y = (boxHeight - imgHeight) / 2
              } else {
                if (imgWidth / imgHeight <= boxWidth / boxHeight) {
                  // 计算宽高比
                  rate = boxHeight / imgHeight
                  drawImg.x = (boxWidth - imgWidth * rate) / 2
                } else {
                  rate = boxWidth / imgWidth
                  drawImg.y = (boxHeight - imgHeight * rate) / 2
                }
              }
              drawImg.swidth = imgWidth
              drawImg.sheight = imgHeight
              drawImg.width = imgWidth * rate
              drawImg.height = imgHeight * rate
              drawImg.x = (boxWidth - drawImg.width) / 2
              drawImg.y = (boxHeight - drawImg.height) / 2
              this.$set(this, 'drawImg', drawImg)
              this.printImg()
              this.putToolBox()
            }
          }, 200)
        }
        this.$emit('onChooseImg', file, this.index)
      }
    },
    putToolBox() {
      // 裁剪框是否能够超出图片
      if (this.toolBoxOverflow) {
        if (
          this.toolBox.width === this.boxWidth / 2 ||
          this.toolBox.height === this.boxHeight / 2 ||
          this.saveCutPosition === false
        ) {
          this.toolBox.width =
            this.cutWidth > this.boxWidth ? this.boxWidth : this.cutWidth
          this.toolBox.height =
            this.cutHeight > this.boxHeight ? this.boxHeight : this.cutHeight
        }
        if (
          (this.toolBox.x === 0 && this.toolBox.y === 0) ||
          this.saveCutPosition === false
        ) {
          this.toolBox.x = this.boxWidth / 2 - this.toolBox.width / 2
          this.toolBox.y = this.boxHeight / 2 - this.toolBox.height / 2
        }
      } else {
        // 如果裁剪框不能超出图片 则默认裁剪框位置等于图片位置
        this.toolBox.x = this.drawImg.x
        this.toolBox.y = this.drawImg.y
        this.toolBox.width = this.drawImg.width
        this.toolBox.height = this.drawImg.height
      }
      this.drawControlBox(
        this.toolBox.width,
        this.toolBox.height,
        this.toolBox.x,
        this.toolBox.y
      )
    },
    isSupportFileApi() {
      if (
        window.File &&
        window.FileList &&
        window.FileReader &&
        window.Blob &&
        navigator.userAgent.indexOf('Edge') === -1 &&
        navigator.userAgent.indexOf('MSIE') === -1 &&
        navigator.userAgent.indexOf('Trident') === -1
      ) {
        return true
      }
      return false
    },
    dataURLtoFile(dataurl, filename) {
      //将图片转换为Base64
      let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      if (this.isSupportFileApi()) {
        let file = new File([u8arr], filename, { type: mime })

        return file
      }
      return '不支持File对象'
    },
    // clear both
    clearAll() {
      let _this = this

      let c = _this.$refs['canvas']

      let ctx = c.getContext('2d')

      ctx.clearRect(0, 0, c.width, c.height)
      let c1 = _this.$refs['canvasSelectBox']

      let ctx1 = c1.getContext('2d')

      ctx1.clearRect(0, 0, c1.width, c1.height)
      let sx = _this.drawImg.sx

      let sy = _this.drawImg.sy

      this.drawImg = {
        img: null, //规定要使用的图像、画布或视频
        sx: sx, //开始剪切的 x 坐标位置
        sy: sy, //开始剪切的 y 坐标位置
        swidth: 0, //被剪切图像的宽度
        sheight: 0, //被剪切图像的高度
        x: 0, //在画布上放置图像的 x 坐标位置
        y: 0, //在画布上放置图像的 y 坐标位置
        width: 0, //要使用的图像的宽度
        height: 0 //要使用的图像的高度
      }
      this.isFlipHorizontal = false
      this.isFlipVertically = false
      this.$refs['inputFile'].value = ''
      this.rotateImg.angle = 0
      this.drawImg.img = null
      this.turnReset()
      this.clearCutImageObj()
      this.$emit('onClearAll', this.index)
    },
    clearCutImageObj() {
      if (this.cutImageObj !== null && this.cutImageObj !== undefined) {
        if (typeof this.cutImageObj.remove === 'function') {
          this.cutImageObj.remove()
        } else {
          this.cutImageObj.removeNode()
        }
      }
      this.cutImageObj = null
    },
    // draw control
    drawControlBox(width, height, x, y) {
      // 裁剪框是否能够超出图片
      if (this.toolBoxOverflow) {
        if (width > this.boxWidth) {
          width = this.boxWidth
        }
        if (height > this.boxHeight) {
          height = this.boxHeight
        }
        if (x < 0) {
          x = 0
        }
        if (y < 0) {
          y = 0
        }
      } else {
        if (width > this.drawImg.width) {
          width = this.drawImg.width
        }
        if (height > this.drawImg.height) {
          height = this.drawImg.height
        }
        if (x < this.drawImg.x) {
          x = this.drawImg.x
        }
        if (y < this.drawImg.y) {
          y = this.drawImg.y
        }

        if (x > this.drawImg.x + this.drawImg.width - width) {
          x = this.drawImg.x + this.drawImg.width - width
        }
        if (y > this.drawImg.y + this.drawImg.height - height) {
          y = this.drawImg.y + this.drawImg.height - height
        }
      }

      let $toolBoxControl = this.$refs['toolBoxControl']

      let c = this.$refs['canvasSelectBox']

      let ctx = c.getContext('2d')

      ctx.fillStyle = this.selectBoxColor
      ctx.clearRect(0, 0, c.width, c.height)
      ctx.fillRect(0, 0, c.width, c.height)

      let toolBoxControlWidth, toolBoxControlHeight

      if (this.rate && this.rate !== '') {
        let p = this.rate.split(':')[0] / this.rate.split(':')[1]

        if (p >= 1) {
          toolBoxControlWidth = width
          toolBoxControlHeight = width / p
        } else {
          toolBoxControlWidth = height * p
          toolBoxControlHeight = height
        }
      } else {
        toolBoxControlWidth = width
        toolBoxControlHeight = height
      }
      this.toolBox.width = toolBoxControlWidth
      this.toolBox.height = toolBoxControlHeight

      $toolBoxControl.style.width = Math.abs(toolBoxControlWidth) + 'px'
      $toolBoxControl.style.height = Math.abs(toolBoxControlHeight) + 'px'

      this.toolBox.boxMove.moveTo.x = x
      this.toolBox.boxMove.moveTo.y = y

      if (toolBoxControlWidth < 0) {
        x = x + toolBoxControlWidth
      }
      if (toolBoxControlHeight < 0) {
        y = y + toolBoxControlHeight
      }
      if (x + this.toolBox.width > this.boxWidth) {
        x = this.boxWidth - this.toolBox.width
      }
      if (x < 0) {
        x = 0
      }
      if (y + this.toolBox.height > this.boxHeight) {
        y = this.boxHeight - this.toolBox.height
      }
      if (y < 0) {
        y = 0
      }

      this.toolBoxPosition.x = x
      this.toolBoxPosition.y = y

      $toolBoxControl.style.left = x + 'px'
      $toolBoxControl.style.top = y + 'px'

      ctx.clearRect(
        x,
        y,
        Math.abs(toolBoxControlWidth),
        Math.abs(toolBoxControlHeight)
      )
      if (this.onPrintImgTimmer) {
        clearTimeout(this.onPrintImgTimmer)
      }
      this.onPrintImgTimmer = setTimeout(() => {
        this.cropPicture(true)
      }, 100)
    },

    resetToolBox() {
      if (this.toolBox.width < 0) {
        this.toolBox.boxMove.moveTo.x = this.toolBox.x - this.toolBox.width
      }
      if (this.toolBox.height < 0) {
        this.toolBox.boxMove.moveTo.y = this.toolBox.y - this.toolBox.height
      }
      this.toolBox.width = Math.abs(this.toolBox.width)
      this.toolBox.height = Math.abs(this.toolBox.height)
    },
    // toolBoxMouseDown
    toolBoxMouseDown(e) {
      let $toolBox = this.$refs['toolBoxControl']

      this.toolBox.x = parseInt($toolBox.style.left.split('px')[0])

      this.toolBox.y = parseInt($toolBox.style.top.split('px')[0])

      this.toolBox.disable = false
      this.dropImg.active = false
      this.toolBox.boxMove.start = {
        x: e.pageX,
        y: e.pageY
      }
    },
    toolBoxMouseMove(e) {
      if (this.dropImg.active) {
        this.dropImgMove(e)
      }
      if (this.toolBox.disable === false && this.moveAble === true) {
        let offsetX = e.pageX - this.toolBox.boxMove.start.x

        let offsetY = e.pageY - this.toolBox.boxMove.start.y

        let x = this.toolBox.x + offsetX

        let y = this.toolBox.y + offsetY

        this.drawControlBox(this.toolBox.width, this.toolBox.height, x, y)
      }
    },
    toolBoxMouseLeave() {
      this.toolBox.disable = true
      if (this.onPrintImgTimmer) {
        clearTimeout(this.onPrintImgTimmer)
      }
      this.onPrintImgTimmer = setTimeout(() => {
        this.cropPicture(true)
      }, 100)
      this.resetToolBox()
    },
    toolBoxMouseUp() {
      this.toolBox.x = parseInt(this.toolBoxPosition.x)
      this.toolBox.y = parseInt(this.toolBoxPosition.y)
      this.toolBox.disable = true
      this.dropImg.active = false
      this.resetToolBox()
    },
    // 绘制图片
    printImg() {
      if (this.drawImg.img) {
        let canv = this.$refs['canvas']

        let ctx = canv.getContext('2d')

        // 文字水印
        ctx.font = '18px bold 黑体'
        ctx.fillStyle = '#ff0'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'

        ctx.save()
        ctx.clearRect(0, 0, canv.width, canv.height)
        ctx.translate(
          this.drawImg.x + this.drawImg.width / 2,
          this.drawImg.y + this.drawImg.height / 2
        )
        ctx.rotate((this.rotateImg.angle * Math.PI) / 180)
        ctx.translate(
          -(this.drawImg.x + this.drawImg.width / 2),
          -(this.drawImg.y + this.drawImg.height / 2)
        )
        ctx.translate(this.drawImg.x, this.drawImg.y)
        ctx.scale(
          this.isFlipHorizontal ? -1 : 1,
          this.isFlipVertically ? -1 : 1
        )
        ctx.drawImage(
          this.drawImg.img,
          this.drawImg.sx,
          this.drawImg.sy,
          this.drawImg.swidth,
          this.drawImg.sheight,
          this.isFlipHorizontal ? -this.drawImg.width : 0,
          this.isFlipVertically ? -this.drawImg.height : 0,
          this.drawImg.width,
          this.drawImg.height
        )
        ctx.translate(-this.drawImg.x, this.drawImg.y)

        ctx.restore()
        if (this.onPrintImgTimmer) {
          clearTimeout(this.onPrintImgTimmer)
        }
        this.onPrintImgTimmer = setTimeout(() => {
          this.cropPicture(true)
        }, 100)
      }
    },
    // 拖动图片
    dropImgOn(e) {
      if (this.imgMove === true) {
        this.dropImg.active = true
        this.dropImg.params = { ...this.drawImg }
        this.dropImg.pageX = e.pageX
        this.dropImg.pageY = e.pageY
      }
    },
    dropImgOff() {
      this.dropImg.active = false
      if (this.onPrintImgTimmer) {
        clearTimeout(this.onPrintImgTimmer)
      }
      this.onPrintImgTimmer = setTimeout(() => {
        this.cropPicture(true)
      }, 100)
    },
    dropImgMove(e) {
      if (this.dropImg.active && this.drawImg.img) {
        let drawImg = { ...this.drawImg }
        drawImg.x = this.dropImg.params.x - (this.dropImg.pageX - e.pageX)
        drawImg.y = this.dropImg.params.y - (this.dropImg.pageY - e.pageY)
        // 裁剪框是否能够超出图片
        if (!this.toolBoxOverflow) {
          if (drawImg.x > this.toolBox.x) {
            drawImg.x = this.toolBox.x
          }
          if (drawImg.x < this.toolBox.x + this.toolBox.width - drawImg.width) {
            drawImg.x = this.toolBox.x + this.toolBox.width - drawImg.width
          }

          if (drawImg.y > this.toolBox.y) {
            drawImg.y = this.toolBox.y
          }
          if (
            drawImg.y <
            this.toolBox.y + this.toolBox.height - drawImg.height
          ) {
            drawImg.y = this.toolBox.y + this.toolBox.height - drawImg.height
          }
        }
        this.$set(this, 'drawImg', drawImg)
        this.printImg()
        e.stopPropagation()
      }
    },
    // 缩放
    scaleReset() {
      this.drawImg.width = this.drawImg.swidth
      this.drawImg.height = this.drawImg.sheight
      this.printImg()
    },
    scaleImgWheel(e) {
      if (this.drawImg.img && this.scaleAble === true) {
        let scale

        // e是FF的事件。window.event是chrome/ie/opera的事件
        let ee = e || window.event

        if (ee.wheelDelta) {
          //IE/Opera/Chrome
          scale = -(ee.wheelDelta / 40)
        } else if (ee.detail) {
          //Firefox
          scale = ee.detail
        }

        // 裁剪框是否能够超出图片
        if (this.toolBoxOverflow) {
          let widthLimit = 50
          this.drawImg.x =
            this.drawImg.width - scale * 9 > widthLimit
              ? this.drawImg.x + scale * 3
              : this.drawImg.x
          this.drawImg.y =
            this.drawImg.width - scale * 9 > widthLimit
              ? this.drawImg.y + scale * 3
              : this.drawImg.y
          this.drawImg.width =
            this.drawImg.width - scale * 9 > widthLimit
              ? this.drawImg.width - scale * 9
              : widthLimit
          this.drawImg.height = this.drawImg.width / this.scaleImg.rate
        } else {
          let widthLimit = this.toolBox.width
          this.drawImg.x =
            this.drawImg.width - scale * 9 > widthLimit
              ? this.drawImg.x + scale * 3
              : this.drawImg.x

          this.drawImg.y =
            this.drawImg.width - scale * 9 > widthLimit
              ? this.drawImg.y + scale * 3
              : this.drawImg.y

          if (
            this.drawImg.x > this.toolBox.x ||
            this.drawImg.x + this.drawImg.width <
              this.toolBox.x + this.toolBox.width ||
            this.drawImg.width <= this.toolBox.width
          ) {
            this.drawImg.x = this.toolBox.x
          }
          if (
            this.drawImg.y > this.toolBox.y ||
            this.drawImg.y + this.drawImg.height <
              this.toolBox.y + this.toolBox.height
          ) {
            this.drawImg.y = this.toolBox.y
          }
          this.drawImg.width =
            this.drawImg.width - scale * 9 > widthLimit
              ? this.drawImg.width - scale * 9
              : widthLimit
          this.drawImg.height = this.drawImg.width / this.scaleImg.rate
        }

        this.printImg()
        if (this.onPrintImgTimmer) {
          clearTimeout(this.onPrintImgTimmer)
        }
        this.onPrintImgTimmer = setTimeout(() => {
          this.cropPicture(true)
        }, 100)
      }
      // let scrollTop = this.$refs['mask'].scrollTop;
      // window.scrollTo(this.$refs['mask'].scrollLeft,scrollTop);
      e.preventDefault()
      e.returnValue = false
      return false
    },
    // 水平翻转
    flipHorizontal() {
      if (this.drawImg.img) {
        if (this.isFlipHorizontal == false) {
          this.isFlipHorizontal = true
        } else {
          this.isFlipHorizontal = false
        }
        this.printImg()
      }
    },
    // 垂直翻转
    flipVertically() {
      if (this.drawImg.img) {
        if (this.isFlipVertically == false) {
          this.isFlipVertically = true
        } else {
          this.isFlipVertically = false
        }
        this.printImg()
      }
    },
    // 旋转
    turnImg(angle) {
      let startAngle = this.rotateImg.angle

      let turnAngle = startAngle + angle

      if (turnAngle >= -180 && turnAngle <= 180) {
        this.rotateImg.angle = turnAngle
        this.rotateControl.position = (turnAngle / 180) * 100 + 100
        this.printImg('rotate')
      }
    },
    turnReset() {
      this.rotateImg.angle = 0
      this.rotateControl.position = 100
      this.printImg('rotate')
    },
    // control box
    controlBtnMouseDown(e, btnName) {
      this.controlBox.disable = false
      this.controlBox.btnName = btnName
      this.controlBox.start.x = e.clientX
      this.controlBox.start.y = e.clientY
      this.controlBox.start.width = this.toolBox.width
      this.controlBox.start.height = this.toolBox.height
      e.stopPropagation()
    },
    controlBtnMouseUp(e) {
      this.controlBox.disable = true
      this.dropImgOff()
      this.resetToolBox()
      this.toolBoxMouseUp()
      e.stopPropagation()
    },

    controlBtnMouseMove(e) {
      if (this.controlBox.disable === false) {
        let offsetX = e.clientX - this.controlBox.start.x

        let offsetY = e.clientY - this.controlBox.start.y

        let x, y

        if (this.controlBox.btnName == 'leftUp') {
          if (!this.rate) {
            x = this.toolBox.x + offsetX
            y = this.toolBox.y + offsetY
          } else {
            let p = this.rate.split(':')[0] / this.rate.split(':')[1]

            if (p >= 1) {
              x = this.toolBox.x + offsetX
              y = this.toolBox.y + offsetX / p
            } else {
              x = this.toolBox.x + offsetY * p
              y = this.toolBox.y + offsetY
            }
          }
          this.toolBox.width = this.controlBox.start.width - offsetX
          this.toolBox.height = this.controlBox.start.height - offsetY
        }
        if (this.controlBox.btnName == 'rightUp') {
          if (!this.rate) {
            x = this.toolBox.x
            y = this.toolBox.y + offsetY
          } else {
            let p = this.rate.split(':')[0] / this.rate.split(':')[1]

            if (p >= 1) {
              x = this.toolBox.x
              y = this.toolBox.y - offsetX / p
            } else {
              x = this.toolBox.x
              y = this.toolBox.y + offsetY
            }
          }
          this.toolBox.width = this.controlBox.start.width + offsetX
          this.toolBox.height = this.controlBox.start.height - offsetY
        }
        if (this.controlBox.btnName == 'rightDown') {
          x = this.toolBox.x
          y = this.toolBox.y
          this.toolBox.width = this.controlBox.start.width + offsetX
          this.toolBox.height = this.controlBox.start.height + offsetY
        }
        if (this.controlBox.btnName == 'leftDown') {
          if (!this.rate) {
            x = this.toolBox.x + offsetX
            y = this.toolBox.y
          } else {
            let p = this.rate.split(':')[0] / this.rate.split(':')[1]

            if (p >= 1) {
              x = this.toolBox.x + offsetX
              y = this.toolBox.y
            } else {
              x = this.toolBox.x + -offsetY * p
              y = this.toolBox.y
            }
          }
          this.toolBox.width = this.controlBox.start.width - offsetX
          this.toolBox.height = this.controlBox.start.height + offsetY
        }
        if (this.controlBox.btnName == 'topCenter') {
          x = this.toolBox.x
          y = this.toolBox.y + offsetY
          this.toolBox.width = this.controlBox.start.width
          this.toolBox.height = this.controlBox.start.height - offsetY
        }
        if (this.controlBox.btnName == 'downCenter') {
          x = this.toolBox.x
          y = this.toolBox.y
          this.toolBox.width = this.controlBox.start.width
          this.toolBox.height = this.controlBox.start.height + offsetY
        }
        if (this.controlBox.btnName == 'leftCenter') {
          x = this.toolBox.x + offsetX
          y = this.toolBox.y
          this.toolBox.width = this.controlBox.start.width - offsetX
          this.toolBox.height = this.controlBox.start.height
        }
        if (this.controlBox.btnName == 'rightCenter') {
          x = this.toolBox.x
          y = this.toolBox.y
          this.toolBox.width = this.controlBox.start.width + offsetX
          this.toolBox.height = this.controlBox.start.height
        }
        this.drawControlBox(this.toolBox.width, this.toolBox.height, x, y)
      }
      e.stopPropagation()
    },
    changeFileName(fileName, type) {
      let index = fileName.lastIndexOf('.')

      return fileName.substr(0, index + 1) + (type === 'jpeg' ? 'jpg' : type)
    },
    cropPicture(doNotReset) {
      let _this = this

      if (this.drawImg.img) {
        // get img
        let canvas = this.$refs['canvas']

        // 文字水印
        if (this.WatermarkText && !doNotReset) {
          let ctx2 = canvas.getContext('2d')

          ctx2.font = this.WatermarkTextFont
          ctx2.fillStyle = this.WatermarkTextColor
          ctx2.textAlign = 'right'
          ctx2.textBaseline = 'bottom'
          ctx2.fillText(
            this.WatermarkText,
            this.toolBox.x + this.toolBox.width * this.WatermarkTextX,
            this.toolBox.y + this.toolBox.height * this.WatermarkTextY
          )
        }

        let tempImg = new Image()

        if (this.crossOrigin === true) {
          tempImg.crossOrigin = this.crossOriginHeader
        }
        tempImg.src = canvas.toDataURL(`image/${this.fileType}`)

        if (!HTMLCanvasElement.prototype.toBlob) {
          Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
            value: (callback, type, quality) => {
              if (window.atob) {
                setTimeout(() => {
                  let binStr = atob(
                    canvas.toDataURL(type, quality).split(',')[1]
                  )

                  let len = binStr.length,
                    arr = new Uint8Array(len)

                  let NewBlob

                  for (let i = 0; i < len; i++) {
                    arr[i] = binStr.charCodeAt(i)
                  }
                  try {
                    NewBlob = new Blob([arr], {
                      type: `image/${_this.fileType}`
                    })
                  } catch (e) {
                    window.BlobBuilder =
                      window.BlobBuilder ||
                      window.WebKitBlobBuilder ||
                      window.MozBlobBuilder ||
                      window.MSBlobBuilder
                    if (e.name == 'TypeError' && window.BlobBuilder) {
                      const BlobBuilder = window.BlobBuilder

                      let bb = new BlobBuilder()

                      bb.append(arr.buffer)
                      NewBlob = bb.getBlob(`image/${_this.fileType}`)
                    }
                    if (e.name == 'InvalidStateError') {
                      NewBlob = new Blob([arr.buffer], {
                        type: `image/${_this.fileType}`
                      })
                    }
                  }
                  // TypeError old chrome and FF
                  callback(NewBlob)
                }, 200)
              } else {
                callback(false, {
                  type: `image/${_this.fileType}`
                })
              }
            }
          })
        }
        canvas.toBlob((blob) => {
          if (blob) {
            let reader = new FileReader()

            reader.readAsDataURL(blob)
            reader.onload = () => {
              let timmer = setInterval(() => {
                if (reader.readyState == 2) {
                  clearInterval(timmer)
                  let newCanv = document.createElement('canvas')

                  let ctx = newCanv.getContext('2d')

                  // 原图裁剪 originalGraph
                  if (_this.originalGraph == true) {
                    let scale = _this.drawImg.width / _this.drawImg.swidth

                    // 计算实际图像大小
                    let transWidth = _this.toolBox.width / scale

                    let transHeight = _this.toolBox.height / scale

                    newCanv.width = transWidth
                    newCanv.height = transHeight
                    // 重新计算裁剪坐标
                    let sx = (_this.toolBox.x - _this.drawImg.x) / scale

                    let sy = (_this.toolBox.y - _this.drawImg.y) / scale

                    let swidth = _this.drawImg.swidth

                    let sheight = _this.drawImg.sheight

                    // TODO 使原图裁剪支持旋转后的图像
                    // ctx.translate(sx + transWidth/2, sy + transHeight/2);
                    // ctx.rotate((_this.rotateImg.angle) * Math.PI / 180);
                    // ctx.translate(-(sx + transWidth/2), -(sy + transHeight/2));
                    ctx.translate(-sx, -sy)
                    ctx.drawImage(_this.drawImg.img, 0, 0, swidth, sheight)
                  } else {
                    newCanv.width = _this.toolBox.width
                    newCanv.height = _this.toolBox.height
                    let params = _this.toolBox

                    if (_this.rate) {
                      let p =
                        _this.rate.split(':')[0] / _this.rate.split(':')[1]

                      let m = _this.rate.split(':')[0]

                      let n = _this.rate.split(':')[1]

                      if (m >= n) {
                        ctx.drawImage(
                          tempImg,
                          params.x,
                          params.y,
                          params.width,
                          params.width * p,
                          0,
                          0,
                          params.width,
                          params.width * p
                        )
                      } else {
                        ctx.drawImage(
                          tempImg,
                          params.x,
                          params.y,
                          params.width,
                          params.width / p,
                          0,
                          0,
                          params.width,
                          params.width / p
                        )
                      }
                    } else {
                      ctx.drawImage(
                        tempImg,
                        params.x,
                        params.y,
                        params.width,
                        params.height,
                        0,
                        0,
                        params.width,
                        params.height
                      )
                    }
                  }
                  newCanv.toBlob(
                    (newBlob) => {
                      let fileName = _this.changeFileName(
                        _this.fileName,
                        _this.fileType
                      )

                      if (!doNotReset) {
                        _this.handleClose()
                        _this.$emit('cutDown', {
                          index: _this.index,
                          fileName,
                          blob: newBlob,
                          file: _this.dataURLtoFile(
                            newCanv.toDataURL(`image/${_this.fileType}`),
                            fileName
                          ),
                          dataURL: newCanv.toDataURL(`image/${_this.fileType}`)
                        })
                      } else {
                        if (_this.previewMode) {
                          _this.$emit('onPrintImg', {
                            index: _this.index,
                            fileName,
                            blob: newBlob,
                            file: _this.dataURLtoFile(
                              newCanv.toDataURL(`image/${_this.fileType}`),
                              fileName
                            ),
                            dataURL: newCanv.toDataURL(
                              `image/${_this.fileType}`
                            )
                          })
                        }
                      }
                    },
                    `image/${_this.fileType}`,
                    0.95
                  )
                }
              }, 200)
            }
          } else {
            // IE9及以下
            let newCanv = document.createElement('canvas')

            newCanv.width = _this.toolBox.width
            newCanv.height = _this.toolBox.height
            let ctx = newCanv.getContext('2d')

            let params = _this.toolBox

            if (_this.rate) {
              let p = _this.rate.split(':')[0] / _this.rate.split(':')[1]

              ctx.drawImage(
                tempImg,
                params.x,
                params.y,
                params.width,
                params.width * p,
                0,
                0,
                params.width,
                params.width * p
              )
            } else {
              ctx.drawImage(
                tempImg,
                params.x,
                params.y,
                params.width,
                params.height,
                0,
                0,
                params.width,
                params.height
              )
            }
            let fileName = _this.changeFileName(_this.fileName, _this.fileType)

            if (!doNotReset) {
              _this.handleClose()
              _this.$emit('cutDown', {
                fileName,
                dataURL: newCanv.toDataURL(`image/${_this.fileType}`)
              })
            } else {
              _this.$emit('onPrintImg', {
                fileName,
                dataURL: newCanv.toDataURL(`image/${_this.fileType}`)
              })
            }
          }
        }),
          `image/${_this.fileType}`
      } else {
        if (!doNotReset) {
          console.warn('No picture selected')
          _this.$emit('error', {
            err: 1,
            msg: 'No picture selected'
          })
        }
      }
    },
    scrollBarControlMove(e) {
      if (this.rotateControl.active) {
        let offsetX = e.pageX - this.rotateControl.start.x

        //                let rotate = this.rotateImg.angle/360*100 + offsetX/100*100;
        let position = this.rotateControl.start.position + offsetX

        if (position <= 0) {
          position = 0
        }
        if (position >= 200) {
          position = 200
        }
        this.rotateControl.position = position
        this.rotateImg.angle = ((position - 100) / 100) * 180
        this.printImg()
      }
    },
    scrollBarControlOn(e) {
      this.rotateControl.active = true
      this.rotateControl.start.x = e.pageX
      this.rotateControl.start.y = e.pageY
      this.rotateControl.start.position = this.rotateControl.position
    },
    scrollBarControlOff() {
      this.rotateControl.active = false
    }
  }
}
</script>
<style scoped>
.vue-img-cutter {
  font-size: 12px;
  line-height: 130%;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.i-dialog-footer {
  display: block;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: left;
}

.mask {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.dialogBox {
  clear: both;
}

.dialogBoxModal {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  clear: both;
}

.dialogMainModal {
  line-height: 125%;
  font-size: 16px;
  position: absolute;
  top: 100px;
  left: 50%;
  margin-bottom: 100px;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  box-sizing: border-box;
  padding: 15px 15px 0 15px;
  background: #fff;
  z-index: 1000;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently*/
  animation: dialogShow 0.3s;
}

.dialogMain {
  line-height: 125%;
  font-size: 16px;
  box-sizing: border-box;
  background: #fff;
  z-index: 1000;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently*/
}

@keyframes dialogShow {
  from {
    margin-top: -50px;
    opacity: 0;
  }
  to {
    margin-top: 0;
    opacity: 1;
  }
}

.toolMain {
  box-sizing: border-box;
}

.toolBox {
  border: 1px solid #dedede;
  background-image: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.25) 25%,
      transparent 0,
      transparent 75%,
      rgba(0, 0, 0, 0.25) 0
    ),
    linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.25) 25%,
      transparent 0,
      transparent 75%,
      rgba(0, 0, 0, 0.25) 0
    );
  background-color: #eee;
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
  position: relative;
}

.tool-title {
  margin-bottom: 10px;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 98;
}

.canvasSelectBox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

@keyframes zi-antBorder {
  0% {
    background-position: 0px 0px;
  }
  50% {
    background-position: 0px 5px;
  }
  100% {
    background-position: 0px 10px;
  }
}

.toolBoxControl {
  background: rgba(255, 255, 255, 0);
  /*background:#fff;*/
  position: absolute;
  z-index: 101;
  box-sizing: border-box;
  /*border: 1px dotted #409EFF;*/
}

.toolBoxControlBox {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
  z-index: 103;
  pointer-events: none;
}

.controlBoxInnerLine {
  position: absolute;
  z-index: 1;
  background-size: 10px 10px;
  background-image: linear-gradient(
    -45deg,
    rgba(64, 158, 255, 1) 25%,
    rgba(64, 158, 255, 0) 25%,
    rgba(64, 158, 255, 0) 50%,
    rgba(64, 158, 255, 1) 50%,
    rgba(64, 158, 255, 1) 75%,
    rgba(64, 158, 255, 0) 75%,
    rgba(64, 158, 255, 0)
  );
  -ms-animation: zi-antBorder 0.8s linear 0s infinite normal;
  -moz-animation: zi-antBorder 0.8s linear 0s infinite normal;
  -webkit-animation: zi-antBorder 0.8s linear 0s infinite normal;
  animation: zi-antBorder 0.8s linear 0s infinite normal;
  pointer-events: none;
}

.controlBoxInnerLineTop {
  height: 1px;
  width: 100%;
  top: -1px;
}

.controlBoxInnerLineBottom {
  height: 1px;
  width: 100%;
  bottom: -1px;
}

.controlBoxInnerLineLeft {
  height: 100%;
  width: 1px;
  left: -1px;
  top: 0;
}

.controlBoxInnerLineRight {
  height: 100%;
  width: 1px;
  right: -1px;
  top: 0;
}

.toolBoxControlLine {
  position: absolute;
  z-index: 1;
  background: transparent;
}

.toolBoxControlLineItem-1 {
  top: 33%;
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border-bottom: 1px dashed #409eff;
}

.toolBoxControlLineItem-2 {
  top: 66%;
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border-bottom: 1px dashed #409eff;
}

.toolBoxControlLineItem-3 {
  left: 33%;
  border-right: 1px dashed #409eff;
  height: 100%;
  width: 1px;
  box-sizing: border-box;
}

.toolBoxControlLineItem-4 {
  left: 66%;
  border-right: 1px dashed #409eff;
  height: 100%;
  width: 1px;
  box-sizing: border-box;
}

.controlBox {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: move;
  z-index: 1;
  pointer-events: none;
}

.controlBtn {
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  background: #409eff;
  position: absolute;
  border-radius: 50%;
  z-index: 999;
  pointer-events: auto !important;
}

.leftUp {
  top: 0;
  left: 0;
  margin-left: -3px;
  margin-top: -3px;
  cursor: se-resize;
}

.leftDown {
  bottom: 0;
  left: 0;
  margin-left: -3px;
  margin-bottom: -3px;
  cursor: sw-resize;
}

.rightUp {
  top: 0;
  right: 0;
  margin-right: -3px;
  margin-top: -3px;
  cursor: sw-resize;
}

.rightDown {
  bottom: 0;
  right: 0;
  margin-right: -3px;
  margin-bottom: -3px;
  cursor: se-resize;
}

.topCenter {
  top: 0;
  right: 50%;
  margin-right: -3px;
  margin-top: -3px;
  cursor: s-resize;
}

.downCenter {
  bottom: 0;
  right: 50%;
  margin-right: -3px;
  margin-bottom: -3px;
  cursor: s-resize;
}

.leftCenter {
  top: 50%;
  left: 0;
  margin-left: -3px;
  margin-top: -3px;
  cursor: e-resize;
}

.rightCenter {
  top: 50%;
  right: 0;
  margin-right: -3px;
  margin-top: -3px;
  cursor: e-resize;
}

.toolBar {
  margin-top: 10px;
}

.selectArea {
  display: block;
  width: 260px;
  text-align: right;
  color: #fff;
  position: absolute;
  top: -20px;
  right: 0;
  font-size: 10px;
  user-select: none;
}

.tips {
  position: absolute;
  top: 50%;
  left: 50%;
  color: red;
  z-index: 101;
  transform: translate(-50%, -50%);
}

.btn {
  display: inline-block;
  text-align: center;
  background: #dedede;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently*/
}

.btn[disabled] {
  opacity: 0.6;
  color: #333;
  border-color: #dedede !important;
  background-color: #fff !important;
  cursor: default;
}

.btn[disabled]:hover {
  opacity: 0.6;
  color: #333 !important;
  border-color: #dedede !important;
  background-color: #fff !important;
}

.btn-default {
  color: #333;
  border-color: #dcdfe6;
  background-color: #fff;
  transition: background 0.3s, color 0.3s;
}

.btn-default:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.btn-primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  transition: background 0.3s, color 0.3s;
}

.btn-primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.btn-warning {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}

.btn-warning:hover {
  color: #fff;
  background-color: #eeba6c;
  border-color: #e6a23c;
  transition: background 0.3s, color 0.3s;
}

.btn-primary-plain {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  transition: background 0.3s, color 0.3s;
}

.btn-primary-plain:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.btn-xs {
  height: 26px;
  line-height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.dialog-footer {
  float: right;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-in-enter {
  margin-top: -50px;
  opacity: 0;
  transition: margin-top 0.2s, opacity 0.2s;
}

.fade-out-enter {
  transition: margin-top 0.2s, opacity 0.2s;
}

.fade-in-active {
  transition: margin-top 0.2s, opacity 0.2s;
}

.fade-out-active {
  margin-top: -50px;
  opacity: 0;
  transition: margin-top 0.2s, opacity 0.2s;
}

.file-input {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #dedede;
}

.file-input::placeholder {
  color: #c0c4cc;
}

.toolbar-item {
  display: inline-block;
}

.closeIcon {
  float: right;
  cursor: pointer;
  display: block;
  background: #c6e2ff;
  color: #fff;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  transition: transform 0.3s, background 0.3s;
  /*transform: rotate(90deg);*/
}

.closeIcon:hover {
  background: #409eff;
  transform: rotate(180deg);
}

.copyright {
  font-size: 10px !important;
  clear: both !important;
  width: 100% !important;
  text-align: right !important;
  display: block !important;
  opacity: 0.5 !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  line-height: 100% !important;
  z-index: 100 !important;
}

.copyright a {
  color: #fff !important;
  text-decoration: none !important;
  position: relative !important;
  opacity: 1 !important;
  display: inline-block !important;
  padding: 2px !important;
  background: rgba(0, 0, 0, 0.4);
}

/*工具栏*/
.dockMain {
  position: absolute;
  z-index: 1002;
  bottom: 5px;
  left: 5px;
  /*transform: translateX(-50%);*/
  opacity: 0.5;
  transition: opacity 0.5s;
  /*width: 98%;*/
  box-sizing: border-box;
  padding: 5px 5px;
  border-radius: 5px;
}

.dockMain:hover {
  opacity: 1;
}

.dockBtn {
  font-size: 10px;
  cursor: pointer;
  display: inline-block;
  margin-right: 4px;
  color: #409eff;
  border: 1px solid #c6e2ff;
  background-color: #ecf5ff;
  padding: 1px 4px;
  border-radius: 3px;
  height: 20px;
  line-height: 16px;
  transition: background 0.2s, color 0.2s;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently*/
}

.dockBtn:hover {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}

/* 旋转进度条 */
.dockBtnScrollBar {
  display: inline-block;
  margin-right: 4px;
  margin-left: 10px;
  background: #409eff;
  width: 200px;
  height: 10px;
  border-radius: 5px;
  position: relative;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently*/
}

.scrollBarControl {
  position: absolute;
  cursor: pointer;
  background: #fff;
  border: 2px solid #409eff;
  box-sizing: border-box;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 3px #1f5184;
}

.scrollBarText {
  position: absolute;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px;
  color: #fff;
  top: -16px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 10px;
  border-radius: 3px;
  transform: translate(-50%, -50%);
}
</style>
